<template>
  <div v-loading="loading" class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('投资项目信息') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('项目名称')" prop="dealName">
        <el-input
          v-model="queryParams.dealName"
          :placeholder="$t('项目名称')"
          clearable
          @keyup.enter.native="queryHandle"
        />
      </el-form-item>
      <el-form-item :label="$t('项目类型')" prop="dealType">
        <dict-select
          v-model="queryParams.dealType"
          dictionary="deal_type"
          :placeholder="$t('项目类型')"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="fundList" border>
      <el-table-column :label="$t('序号')" type="index" align="center" show-overflow-tooltip width="50">
        <template slot-scope="scope">
          {{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column :label="$t('项目名称')" prop="dealName" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <router-link
            target="_blank"
            :to="{path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,dealType: scope.row.dealType, companyId:scope.row.companyId,menuKey: $route.query.menuKey, showType: 'deal'}}"
            class="link_a"
            @click.native="recorePath({ fromPath: $route.fullPath, path:'/deal/home/dealBaseHome',query:{id:scope.row.dealId,dealType: scope.row.dealType, companyId:scope.row.companyId,menuKey: $route.query.menuKey, showType: 'deal'}})"
          >
            {{ $t(scope.row.dealName) }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('标的公司名称')" prop="companyName" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <router-link
            target="_blank"
            :to="{path:'/company/base/companyBaseHome',query:{companyId:scope.row.companyId}}"
            class="link_a"
            @click.native="recorePath({ fromPath: $route.fullPath, path:'/company/base/companyBaseHome',query:{companyId:scope.row.companyId}})"
          >
            {{ $t(scope.row.companyName) }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column :label="$t('项目类型')" prop="dealType" align="center" :formatter="dealTypeFormat" />
      <el-table-column :label="$t('投资金额') + $t('金额单位')" prop="investAmount" align="center">
        <template slot-scope="scope">
          <span>{{ moneyFormat(scope.row.investAmount, 'w') }}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('项目负责人')" prop="personChargeName" align="center" />
      <el-table-column :label="$t('项目阶段')" prop="dealStage" align="center" />
    </el-table>
    <pagination
      v-show="fundTotal>0"
      :total="fundTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="findDealInvestProject"
    />
  </div>
</template>

<script>
  import { findDealInvestProject } from '@/api/fund/internal/internalBase'
  export default {
    name: 'InternalInvestProjectList',
    data() {
      return {
        fundList: [],
        // 项目查询参数
        queryParams: {
          hhqyId: this.$route.query.id,
          dealName: undefined,
          dealType: undefined,
          pageNum: 1,
          pageSize: 10
        },
        // 遮罩层
        loading: false,
        fundTotal: 0,
        // 项目类型字典
        dealTypeOptions: []
      }
    },
    created() {
      this.getList()
      this.getDicts('deal_type').then(response => {
        this.dealTypeOptions = response.data
      })
    },
    methods: {
      getList: async function() {
        this.loading = true
        await this.findDealInvestProject()
        this.loading = false
      },
      findDealInvestProject: async function() {
        await findDealInvestProject(this.queryParams).then(response => {
          this.fundList = response.rows
          this.fundTotal = response.total
        })
      },
      /** 搜索按钮操作 */
      queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm('queryForm')
        this.queryHandle()
      },
      // 项目类型字典翻译
      dealTypeFormat(row) {
        return this.selectDictLabel(this.dealTypeOptions, row.dealType)
      }
    }
  }
</script>

<style scoped>

</style>
